<template>
  <div>
    <a-modal
      :visible="visible"
      :title="title"
      :bodyStyle="{
        padding: '20px 60px',
      }"
      :width="650"
      :footer="null"
      @cancel="cancelClick"
    >
      <a-form :label-col="{ span: 6 }">
        <a-form-item label="获取方式">
          <a-radio-group v-model:value="modelRef.poi_type">
            <a-radio :value="2">手动输入POI_ID</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="抖音地址"
          v-bind="validateInfos.poiIdAddress"
          v-if="modelRef.poi_type == 1"
        >
          <template #extra>
            <span @click="poiTutorial" style="color: #2878ffff; cursor: pointer"
              >查看快速提取抖音POI_ID使用说明</span
            >
          </template>
          <a-input
            v-model:value="modelRef.poiIdAddress"
            placeholder="请粘贴抖音地址链接"
            style="width: 100%"
          />
          <a-button
            type="primary"
            style="
              background: #2878ff;
              border: none;
              border-top-right-radius: 6px;
              border-bottom-right-radius: 6px;
            "
            :loading="poiLoading"
            @click="getPOI"
            v-if="false"
            >一键获取</a-button
          >
        </a-form-item>
        <a-form-item label="POI_ID" v-bind="validateInfos.poi_id">
          <template #extra v-if="modelRef.poi_type == 2">
            <span @click="poiTutorial" style="color: #2878ffff; cursor: pointer"
              >查看POI_ID获取方法</span
            >
          </template>
          <a-input
            :disabled="modelRef.poi_type == 1"
            v-model:value="modelRef.poi_id"
            placeholder="位置POI_ID"
            :style="{
              width: modelRef.poi_type == 1 ? '100%' : '300px',
            }"
            style="width: 100%"
          />
          <a-button
            type="primary"
            style="
              background: #2878ff;
              border: none;
              border-top-right-radius: 6px;
              border-bottom-right-radius: 6px;
            "
            @click="getPOI"
            v-if="false"
            >一键获取</a-button
          >
        </a-form-item>
        <a-form-item label="位置名称" v-bind="validateInfos.store_name">
          <a-input
            v-model:value="modelRef.store_name"
            placeholder="请输入位置名称"
          />
        </a-form-item>
        <a-form-item label="位置地址" v-bind="validateInfos.store_address">
          <a-textarea
            v-model:value="modelRef.store_address"
            show-count
            :maxlength="50"
            placeholder="请输入位置地址"
          />
        </a-form-item>
      </a-form>
      <div class="footer">
        <a-space>
          <a-button
            @click="cancelClick"
            ghost
            type="primary"
            style="border: 1px solid #e0e0e6; color: #000; border-radius: 6px"
            >取消</a-button
          >
          <a-button
            type="primary"
            style="background: #2878ff; border: none; border-radius: 5px"
            @click="submitClick"
            :loading="loading"
            >保存</a-button
          >
        </a-space>
      </div>
    </a-modal>

    <!-- poi教程 -->
    <POITutorial
      :visible="visiblePOITutorial"
      :imgeUrl="tutorialUrl"
      @onCancel="visiblePOITutorial = false"
    />
  </div>
</template>

<script>
import { reactive, toRefs, watch, defineComponent, computed } from "vue";
import { Form, message } from "ant-design-vue";
import { QuestionCircleOutlined } from "@ant-design/icons-vue";
import POITutorial from "./modules/POITutorial.vue";
import request from "../../../../common/utils/request";
import utils from "@/common/utils/utils.js";
const useForm = Form.useForm;
export default defineComponent({
  name: "AddPOI",
  components: { POITutorial },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [Number, String],
      default: 0,
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      count: 0,
      loading: false,
      visiblePOITutorial: false,
      tutorialUrl:
        utils.staticPath + "images/workAi/shotstack/home/explain.png",
      poiLoading: false,
    });
    // 表单数据
    const modelRef = reactive({
      poi_type: 2,
      poiIdAddress: "",
      poi_id: "",
      store_name: "",
      store_address: "",
    });
    // 表单校验规则
    const rulesRef = reactive({
      poiIdAddress: [
        {
          required: true,
          message: "请输入抖音地址",
        },
      ],
      poi_id: [
        {
          required: true,
          message: "请输入POI_ID",
        },
      ],
      store_name: [
        {
          required: true,
          message: "请输入门店名称",
        },
      ],
      store_address: [
        {
          required: true,
          message: "请输入门店地址",
        },
      ],
    });
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );
    const getPOI = () => {
      if (modelRef.poi_type == 1) {
        if (!modelRef.poiIdAddress) {
          message.warn("请输入抖音地址");
          return;
        }
        state.poiLoading = true;
        request
          .get("/work_ai", "/user/shotstack/poi/info", {
            share_url: modelRef.poiIdAddress,
          })
          .then((res) => {
            modelRef.poi_id = res.result.poi_id;
            state.poiLoading = false;
          });
      }
    };
    // 关闭弹窗
    const cancelClick = () => {
      // 清空表单
      resetFields();
      emit("onCancel");
    };
    // 提交
    const submitClick = () => {
      validate().then(() => {
        if (modelRef.poi_type == 2) {
          modelRef.poiIdAddress = undefined;
        }
        modelRef.merchant_library_id = 0;
        state.loading = true;
        if (props.id) {
          request
            .put("/work_ai", "/user/shotstack/poi/update", modelRef)
            .then((res) => {
              message.success("修改成功");
              let data = { ...modelRef };
              emit("onSubmit", data);
              state.loading = false;
            })
            .catch(() => {
              state.loading = false;
            });
          return;
        }
        modelRef.id = undefined;
        request
          .post("/work_ai", "/user/shotstack/poi/add", modelRef)
          .then((res) => {
            message.success("添加成功");
            modelRef.id = res.id;
            let data = { ...modelRef };
            emit("onSubmit", data);
            state.loading = false;
          })
          .catch(() => {
            state.loading = false;
          });
      });
    };
    // 查看获取POI教程图片弹窗
    const poiTutorial = () => {
      state.visiblePOITutorial = true;
    };
    // 获取详情
    const getPoiDetail = () => {
      request
        .get("/work_ai", "/user/shotstack/poi/detail", { id: props.id })
        .then((res) => {
          console.log(res, "9292929");
          sendModelRef(res.result);
        });
    };

    const sendModelRef = (state) => {
      for (let key in state) {
        modelRef[key] = state[key];
      }
    };
    // 弹窗标题
    const title = computed(() => {
      return props.id ? "编辑POI" : "添加POI";
    });

    watch(
      () => modelRef.poi_type,
      (val) => {
        if (val == 2) {
          if (!props.id) {
            modelRef.poiIdAddress = "";
            modelRef.poi_id = "";
          }

          rulesRef.poiIdAddress[0].required = false;
          state.tutorialUrl =
            utils.staticPath + "images/workAi/shotstack/home/explain.png";
        } else {
          if (!props.id) {
            modelRef.poiIdAddress = "";
            modelRef.poi_id = "";
          }

          rulesRef.poiIdAddress[0].required = true;
          state.tutorialUrl =
            utils.staticPath + "images/workAi/shotstack/home/explain.png";
        }
      },
      {
        immediate: true,
      }
    );

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          if (!props.id) {
            // 如果打开的是新增弹窗，则清空表单
            resetFields();
          } else {
            // 如果打开的是编辑弹窗，则获取详情
            getPoiDetail();
          }
        }
      }
    );

    return {
      ...toRefs(state),
      validateInfos,
      modelRef,
      cancelClick,
      submitClick,
      poiTutorial,
      title,
      getPOI,
    };
  },
});
</script>

<style lang="less" scoped>
.footer {
  width: 100%;
  text-align: right;
  margin-top: 40px;
}
</style>
